<template>
  <div class="conner">
    <div class="from">
      <div class="steps_box">
        <div class="steps">
          <span :class="['span_box', , concat == 1 ? 'img1' : '']">
            1.输入账号
          </span>
          <span :class="['span_box', 'img2', concat == 2 ? 'imgbgi' : '']">
            2.输入新密码
          </span>
          <span :class="['span_box', 'img2', concat == 3 ? 'imgbgi' : '']">
            3.再次输入密码
          </span>
          <span :class="['span_box', 'img4', concat == 4 ? 'imgbgi4' : '']">
            4.完成
          </span>
        </div>
      </div>
      <div class="text">
        温馨提示：通过输入企业账号的方式默认找回的新奇特账号下创建者成员账号的密码
      </div>
      <!-- <button-cn text="下一步"></button-cn> -->

      <div style="width: 100%; text-align: center; margin-top: 30px">
        <div v-if="concat == 1">
          账号：
          <el-input
            v-model.trim="user.mobile"
            placeholder="请输入账号"
            style="width: 300px"
            v-focus
            @keyup.enter.native="submint"
          ></el-input>
          <div style="margin-top: 40px">
            <button class="Mybtn" @click="returnPage" v-show="concat == 1">
              返回
            </button>
            <button class="Mybtn" @click="submint" style="margin-left: 30px">
              下一步
            </button>
          </div>
        </div>
        <div v-if="concat == 2">
          密码：
          <el-input
            v-model.trim="user.password"
            placeholder="请输入密码"
            style="width: 300px"
            v-focus
            @keyup.enter.native="next"
          ></el-input>
          <div style="margin-top: 30px">
            <!-- <button class="Mybtn" @click="returnPage" v-show="concat == 1">返回</button> -->
            <button class="Mybtn" @click="next">下一步</button>
          </div>
        </div>
        <div v-if="concat == 3">
          确认密码：
          <el-input
            v-model.trim="user.newPassword"
            placeholder="再次确认密码"
            style="width: 300px"
            v-focus
            @keyup.enter.native="sureSubmeit"
          ></el-input>
          <div style="margin-top: 30px">
            <!-- <button class="Mybtn" @click="returnPage" v-show="concat == 1">返回</button> -->
            <button class="Mybtn" @click="sureSubmeit">确认修改</button>
          </div>
        </div>
        <div v-if="concat == 4">
          <!-- 确认密码：
          <el-input
            v-model.trim="user.newPassword"
            placeholder="再次确认密码"
            style="width: 300px"
          ></el-input> -->
          <el-result icon="success" title="修改成功" subTitle=" ">
            <template slot="extra">
              <button class="Mybtn" @click="returnPage">返回登录</button>
            </template>
          </el-result>
        </div>
        <div style="margin-top: 30px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { accountname, confirmpwd } from "@/request/index";
import buttonCn from "@/components/from/button-cn.vue";
export default {
  data() {
    return {
      isdisabled: false,
      isfromPassword: false,
      concat: 1,

      user: {
        mobile: "",
        password: "",
        newPassword: "",
      },
    };
  },
  components: {
    buttonCn,
  },
  methods: {
    // 上一步
    returnPage() {
      this.$router.push("/login");
    },
    // 下一步
    next() {
      this.concat += 1;
    },
    sureSubmeit() {
      const { password, newPassword } = this.user;

      if (password.length == 0 || newPassword.length == 0) {
        this.$message.error("请输入密码");
      } else {
        if (password === newPassword) {
          var id = localStorage.getItem("id");
          confirmpwd(password, newPassword, id).then((res) => {
            if (res.code != "0000") return this.$message.error(res.msg);
            this.$message.success(res.msg);
            this.concat++;
            // setTimeout(() => {
            //   location.reload();
            // }, 600);
          });
        } else {
          this.$message.error("请确认两次输入的结果一致");
        }
      }
    },
    submint() {
      if (this.user.mobile.length == 0)
        return this.$message.error("请输入账号");
      accountname(this.user.mobile).then((res) => {
        if (res.code != "0000") return this.$message.error(res.msg);
        window.localStorage.setItem("id", res.data[0].manager_id);
        this.$message.success(res.msg);
        this.concat++;
        // this.isfromPassword = true;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.Mybtn {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  // background: #e04e2f;
  background-image: linear-gradient(to left, #ff792c, #e04e2d);

  border: 1px solid #e04e2f;
  color: #fff;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 30px;
  width: 200px;
  font-size: 14px;
  border-radius: 4px;
}
.btn {
  width: 100%;
  height: 100%;
  // background-color: #fff;
  position: relative;
}
.from {
  width: 700px;
  height: 400px;
  // background-color: rgb(234, 226, 226);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .steps_box {
    width: 100%;
    height: 50px;
    display: flex;
    line-height: 50px;
    .steps {
      flex: 1;
      height: 100%;
      // background-color: orange;
      text-align: center;
      line-height: 50px;
      color: #fff;
      .span_box {
        float: left;
        width: 162px;
        height: 36px;
        background: url("../../assets/img_process_1_b.png") no-repeat 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #e04e2d;
        &.one {
          color: #fff !important;
        }
        &.imgbgi {
          background: url("../../assets/img_process_2.png") !important;
          color: #fff !important;
          background-size: 100% !important;
          background-repeat: no-repeat !important;
        }
        &.img1 {
          background: url("../../assets/img_process_1.png");
          color: #fff !important;
          background-size: 100% !important;
          background-repeat: no-repeat !important;
        }
        &.img2,
        &.img3 {
          background: url("../../assets/img_process_2_b.png");
          color: #e04e2d;
          background-size: 100% !important;
          background-repeat: no-repeat !important;
        }

        &.img4,
        &.imgbgi4 {
          background: url("../../assets/img_process_3_b.png");
          color: #e04e2d;
          background-size: 100% !important;
          background-repeat: no-repeat !important;
        }
      }
    }
  }
  .text {
    width: 100%;
    text-align: center;
    color: #e04e2d;
  }
}
</style>
